<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=Ui7ZYGEspMGGCleNuRu50xiiaCVZUuqc"></script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <title>上海发布新冠分布</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #l-map {
            height: 100%;
            width: 100%;
        }

        #r-datepicker {
            z-index: 10;
            width: 330px;
            height: 220px;
            left: 50px;
            top: 50px;
            font-size: 14px;
            line-height: 20px;
            position: absolute;
            background: rgba(202, 199, 199, 0.5);
        }
    </style>
</head>

<body>
    <div id="l-map"></div>
    <div id="r-datepicker">
        <div class="input-group date form_date col-md-5" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2"
            data-link-format="yyyy-mm-dd" style="width:100%; top:15px; position:absolute">
            <input id="queryDate" class="form-control" size="16" type="text" value="" readonly>
            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        </div>
        <input type="hidden" id="dtp_input2" value="" />
        <br/>
        <div style="top:60px; position:absolute; padding-left:15px; padding-right:15px; width:100%">
            <input type="button" value="查询" onclick="queryList(0)" style="width:100%" />
        </div>
        <div style="top:100px; position:absolute; padding-left:15px; padding-right:15px; width:100%">
            <li>可以点击“查询”按钮查询上海发布上公布的疫情数据；</li>
            <li>如果没有查询到数据，可能是没有同步上海发布数据，需要微信联系JohsonKingKong刷新；</li>
            <br/>
            <div id="result" style="padding-left:0px; padding-right:0px; width:100%">
            </div>
        </div>
    </div>
    <script>
        $('.form_date').datetimepicker({
            language: 'zh-CN',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        }).bind('dp.change', function(ev){
            // console.log("Select date: " + ev.date.valueOf());
            var d = new Date(e.date);
            console.log(d.getFullYear()); // 年
            console.log(d.getMonth() + 1); // 月
            console.log(d.getDate()); // 日期
        });
        
        // 设置前一天
        var d = new Date(new Date() - 24 * 60 * 60 * 1000);
        var month = d.getMonth();
        var day = d.getDate();
        var year = d.getFullYear();
        $('.form_date').datetimepicker('update', new Date(year, month, day, 00, 00)); 

        // 百度地图API功能
        var map = new BMapGL.Map("l-map");
        map.enableScrollWheelZoom(true);
        map.centerAndZoom("上海市", 12);

        Date.prototype.Format = function (fmt) { //author: meizz 
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        function refreshMapMarker(gpsList) {
            map.clearOverlays();
            document.getElementById("result").innerHTML = "<font color=\"#FF0000\">" + (new Date()).Format("yyyy-MM-dd hh:mm:ss") +"==> 获取到"+gpsList.length+"调记录</font>";
            if (gpsList.length == 0) {
                console.log("Empty List");
                return;
            }
            var lefttop = JSON.parse(JSON.stringify(gpsList[0]));
            var rightdown = JSON.parse(JSON.stringify(gpsList[0]));
            for (var i = 0; i < gpsList.length; i++) {
                console.log("longitude: " + gpsList[i].longitude + ", latitude: " + gpsList[i].latitude);
                if (gpsList[i].longitude < lefttop.longitude) {
                    lefttop.longitude = gpsList[i].longitude;
                }
                if (gpsList[i].latitude < lefttop.latitude) {
                    lefttop.latitude = gpsList[i].latitude;
                }
                if (gpsList[i].longitude > rightdown.longitude) {
                    rightdown.longitude = gpsList[i].longitude;
                }
                if (gpsList[i].latitude > rightdown.latitude) {
                    rightdown.latitude = gpsList[i].latitude;
                }
                var marker = new BMapGL.Marker(new BMapGL.Point(gpsList[i].longitude, gpsList[i].latitude), { title: gpsList[i].adress });
                map.addOverlay(marker);
                marker.setLabel(new BMapGL.Label(gpsList[i].casecode, { offset: new BMapGL.Size(10, -10) }));
            }
            var centerLongitude = (rightdown.longitude + lefttop.longitude) / 2;
            var centerLatitude = (rightdown.latitude + lefttop.latitude) / 2;
            console.log("area:   (" + lefttop.longitude + ", " + lefttop.latitude + "), (" + rightdown.longitude + ", " + rightdown.latitude + ")");
            console.log("center: (" + centerLongitude + ", " + centerLatitude + ")");
            map.setCenter(new BMapGL.Point(centerLongitude, centerLatitude))
        }

        function queryList() {
            var queryDate = $('#queryDate').val();
            if (queryDate == '') {
                console.log("invalid queryDate: " + queryDate);
                return;
            }
            // console.log("queryDate: " + queryDate);
            $.ajax({
                url: "http://www.johson.org.cn:8080/gps/list?queryDate=" + queryDate,
                type: "GET",
                dataType: "json",
                contentType: "application/json",
                headers: { "Authorization": "User token from login" },
                data: {},
                success: function (gpsList) {
                    console.log("gpsList: " + gpsList);
                    refreshMapMarker(gpsList)
                },
                error: function (errMsg) {
                    console.log("errMsg: " + errMsg);
                }
            });
        }
    </script>
</body>

</html>